<template>
  <div class="adup-sfc-order">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: false, resize: false }"
      :visible="true"
      :close-on-click-modal="false"
      :title="`修改顺风车订单`"
      :append-to-body="true"
      width="400px"
      @close="closeMd">
      <el-form 
        :model="fm.ps" 
        :ref="fm.fname"
        @keyup.enter.native="onSubmit" 
        :label-width="'100px'">
        <el-form-item label="出发时间" required style="margin-bottom: 0;">
          <el-col :span="11">
            <el-form-item 
              prop="goDate"
              :rules="[
                { required: true, message: '请选择行程出发日期', trigger: 'blur' }
              ]">
              <el-date-picker
                v-model="fm.ps.goDate"
                type="date"
                :value-format="'yyyy-MM-dd'"
                placeholder="行程出发日期"
                style="width: 130px;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="padding:5px;"></el-col>
          <el-col :span="11">
            <el-form-item 
              prop="goTime"
              :rules="[
                { required: true, message: '请选择出发时间', trigger: 'blur' },
                { pattern: /^(?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]$/, message: '时间格式错误' }
              ]">
              <TimeInp 
                pindex="0" 
                :name="'goTime'" 
                :defval="fm.ps.goTime" 
                :tip="'出发时间'" 
                :iconName="'stime'" 
                @pclick="goTimeInp" 
              />
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item 
          label="酒店地址" 
          prop="hotelAddress">
          <el-input 
            v-model="fm.ps.hotelAddress" 
            placeholder="请填写酒店地址" 
            maxlength="30">
          </el-input>
        </el-form-item>

        <el-form-item 
          label="乘车人数" 
          prop="customers"
          :rules="[
            { required: true, message: '请填写乘车人数' },
            { type: 'number', message: '乘车人数格式错误' },
          ]">
          <el-input 
            v-model.number="fm.ps.customers" 
            placeholder="请填写乘车人数" 
            maxlength="8">
            <b slot="suffix" class="c-bbb">人</b>
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="success" 
          icon="el-icon-refresh-right" 
          @click="resetForm">
          重 置
        </el-button>

        <el-button 
          type="primary" 
          icon="el-icon-edit" 
          @click="onSubmit" 
          :loading="fm.sb.load">
          修 改
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import TimeInp from '@/components/TimeInp';

import * as commonSer from '@/api/services/common.service';
import * as orderSer from '@/api/services/order.service';

export default {
  name: 'AdupSfcOrder',
  directives: { elDragDialog },
  components: { TimeInp },
  props: { myData: Object },
  data() {
    return {
      // 修改对象数据
      obj: this.myData.obj,

      fm: {// 表单数据对象
        fname: "adupSfcOrderFm",
        sb: { load: false },
        ps: {
          // 修改导入订单id
          orderId: null,
          // 出发日期
          goDate: null,
          // 出发时间
          goTime: null,
          // 酒店地址
          hotelAddress: null,
          // 上车人数
          customers: null,
        }
      },

      // 站点数组
      stationArr: [],
      
    }
  },
  created() {
    const that = this;

    // // 获取-站点列表
    // let staRes = await commonSer.getStationList({type: that.obj.type});
    // if(staRes.code == 1) that.stationArr = staRes.data;
    // console.log('站点列表', staRes);

    // 设置表单默认数据
    that.setInitData();
  },
  methods:{
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 设置初始化数据
    setInitData(){
      const that = this;

      // 设置-修改回填
      if(that.obj) {
        let o = that.obj;
        console.log('修改对象', o);
        let ps = {
          // 修改导入订单id
          orderId: o.id,
          // 出发日期
          goDate: o.stime.split(' ')[0],
          // 出发时间
          goTime: o.stime.split(' ')[1].substr(0,5),
          // 酒店地址
          hotelAddress: null,
          // 上车人数
          customers: o.customers,
        };
        that.fm.ps = ps;
      }
    },
    // 设置出发时间
    goTimeInp(e){
      this.fm.ps.goTime = e.val || '';
    },

    // 重置表单
    resetForm() {
      this.$refs[this.fm.fname].resetFields();
      this.setInitData();
    },
    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);

      console.log('提交参数', ps);
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          // 验证
          if(!ps.orderId){
            return U.qerrorFalse('[修改订单id]为空，请重新选择订单');
          }

          // 处理参数
          ps.goTime = ps.goDate+' '+ps.goTime;
          delete ps.goDate;

          sb.load = true;
          orderSer.adupSfcOrder(ps).then((res) => {
            sb.load = false;

            if (res.code != 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              // 关闭弹框
              that.closeMd();

              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },
    
  },
 }
</script>